
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

const { width, height } = Dimensions.get('window');

const textwidth = width*8 / 9;
const textright=width/9-6;

const imageWidth = textwidth;

const imageHeight = imageWidth / 0.697;

const styles = StyleSheet.create({
  root: {
    backgroundColor:'white',
    padding:10,
    width: width,
    flexWrap:'wrap',
    flexDirection:'row',
    justifyContent:'space-between'
  },
  left:{
      flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    flexWrap:'wrap',
      width:textwidth,
  },
  right:{
      width:textright,
      alignItems:'center',
      flexDirection:'row',
      flex:1
  },
  image: {
    width: '55%',
    padding:3
  },
  imgwarp:{
      marginTop:5,
      width:'30%',
      padding:3
  },
  title: {
    fontSize: 14,
    textAlign: 'left',
    marginTop: 5,
    width:"70%"
  },
  title2: {
    fontSize: 14,
    textAlign: 'left',
    marginTop: 5,
    width:"30%"
  },
  starsWrapper: {
    flexDirection: 'row',
  },
  stars: {
    width: 10,
    height: 10,
  },
  enter:{
    width:'70%',
    padding:0,
    height:15
  }
});

initimg=function(data){
  switch(data.paymentStatus){
          case '5' : return (<Image
                    source={require('../img/status5.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          case '4' : return (<Image
                    source={require('../img/status4.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          case '3' : return (<Image
                    source={require('../img/status3.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          case '2' : return (<Image
                    source={require('../img/status2.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          case '1' : return (<Image
                    source={require('../img/status1.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          case '6' : return (<Image
                    source={require('../img/status6.png')}
                    resizeMode='contain'
                    style={styles.image}
                  /> );break;
          default:return;
          }
}

const Orderitem = (props) =>  {
  const { title, onPress ,info} = props;
  return (
    <TouchableOpacity style={styles.root} onPress={onPress}>
    <View style={styles.left}>
      <Text
        numberOfLines={1}
        style={styles.title}
      >
       <Text style={{color:'black'}}>时间：</Text> {info.createDate}
      </Text>
      <View style={styles.imgwarp}>
      
      { 
        initimg(info)
      }
      </View>
      <Text
        numberOfLines={1}
        style={styles.title}
      >
        <Text style={{color:'black'}}>桌号： </Text>{info.tablename}
      </Text>
      <Text
        numberOfLines={1}
        style={styles.title2}
      >
        <Text style={{color:'black'}}>实收：  </Text>{info.paidPrice}
      </Text>
      </View>
      <View style={styles.right}>
      <Image source={require('../img/enter.png')}
      resizeMode='contain'
      style={styles.enter}
      />
      </View>
    </TouchableOpacity>
  );
};

export default Orderitem
